<template>
    <view class="main">
        <view class="q" v-if="props.data.length > 3">
            <view class="two p-box dispaly-col-center">
                <view class="icon">
                    <image src="/static/mine/two.png" mode="aspectFill" />
                </view>
                <view class="num">2</view>
                <view class="avatar">
                    <image :src="props.data[1].avatar" mode="aspectFill" />
                </view>
                <view class="name">{{ props.data[1].name }}</view>
                <view class="price" v-if="props.data[1].type == 0">￥{{ props.data[1].total }}</view>
                <view class="price" v-else>拉新{{ props.data[1].pullNew }}人</view>
            </view>
            <view class="one p-box dispaly-col-center">
                <view class="icon">
                    <image src="/static/mine/one.png" mode="aspectFill" />
                </view>
                <view class="num">1</view>
                <view class="avatar">
                    <image :src="props.data[0].avatar" mode="aspectFill" />
                </view>
                <view class="name">{{ props.data[0].name }}</view>
                <view class="price" v-if="props.data[0].type == 0">￥{{ props.data[0].total }}</view>
                <view class="price" v-else>拉新{{ props.data[0].pullNew }}人</view>
            </view>
            <view class="three p-box dispaly-col-center">
                <view class="icon">
                    <image src="/static/mine/three.png" mode="aspectFill" />
                </view>
                <view class="num">3</view>
                <view class="avatar">
                    <image :src="props.data[2].avatar" mode="aspectFill" />
                </view>
                <view class="name">{{ props.data[2].name }}</view>
                <view class="price" v-if="props.data[2].type == 0">￥{{ props.data[2].total }}</view>
                <view class="price" v-else>拉新{{ props.data[2].pullNew }}人</view>
            </view>
        </view>
        <view class="list">
            <view class="item dispaly-just-between"
                v-for="(item, index) in (props.data.length > 3 ? props.data.slice(3) : props.data)" :key="item.id">
                <view class="dispaly-center">
                    <view class="sort">{{ props.data.length > 3 ? index + 4 : index + 1 }}</view>
                    <view class="a">
                        <image :src="item.avatar" mode="aspectFill" />
                    </view>
                    <view class="name">{{ item.name }}</view>
                </view>
                <view class="dispaly-center">
                    <view class="tip">{{ item.type == 0 ? '佣金' : '拉新' }}</view>
                    <view class="price">{{ item.type == 0 ? '￥' + item.total : '拉新' + item.pullNew + '人' }}</view>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup>
const props = defineProps({
    data: Object
})

</script>
<style lang="scss" scoped>
.main {
    .q {
        display: flex;
        align-items: flex-end;

        .p-box {
            border-radius: 18rpx;
            padding: 32rpx;
            position: relative;
            box-sizing: border-box;

            .num {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 44rpx;
                color: #212121;
            }

            .icon {
                position: absolute;
                left: 50%;
                top: -2%;
                transform: translate(-50%, -50%);

                image {
                    width: 47rpx;
                    height: 47rpx;
                }
            }

            .avatar {
                margin: 18rpx 0;

                image {
                    width: 94rpx;
                    height: 92rpx;
                    border-radius: 50%;
                }
            }

            .name,
            .price {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 23rpx;
                color: #111111;
            }

            .name {}

            .price {}
        }

        .one {
            margin: 0 30rpx;
            width: 210rpx;
            height: 310rpx;
            background: #FB4E47;
        }

        .two {
            width: 210rpx;
            height: 280rpx;
            background: #DFE0DF;
        }

        .three {
            width: 210rpx;
            height: 280rpx;
            background: #969696;
        }
    }

    .list {
        margin-top: 44rpx;
        padding-bottom: 110rpx;

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 40rpx;
        }

        .sort {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 28rpx;
            color: #212121;
        }

        .a {
            margin: 0 40rpx 0 20rpx;

            image {
                width: 74rpx;
                height: 74rpx;
                border-radius: 50%;
            }
        }

        .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #111111;
        }

        .tip {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
            margin-right: 40rpx;
        }

        .price {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #111111;
        }
    }
}
</style>